<template>
    <div class="myCollection">
         <!-- 顶部 -->
        <app-header>
            <template v-slot:header-left>
                <svg @click="back" t="1635855361686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2375" width="128" height="128"><path d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z" p-id="2376"></path></svg>
            </template>
            <template v-slot:header-tit>
                我的收藏
            </template>
        </app-header>
        <section class="contain-box">
            <div v-for="item in collectionList" :key="item.id">
                <find-card :cardObj="item"></find-card>
            </div>
            <p>没有更多数据了</p>
        </section>
    </div>
</template>

<script>
import appHeader from "../components/app-header.vue"
import findCard from "../components/find-card.vue"
export default {
    name:"MyCollection",
    components:{
        appHeader,
        findCard
    },
    data(){
        return{
            collectionList:[],
        }
    },
    methods:{
        back(){
            this.$router.go(-1);
        }
    },
    mounted(){
        axios.get("/data/myCollect.json")
        .then(
            res=>{
                this.collectionList = [...res.data.resData.list];
            }
        )
        .catch(
            err=>{
                console.log(err);
            }
        )
    }
}
</script>
<style lang="scss" scoped>
$bodyCol:rgb(246,246,246);
$maxWidth:645px;
.contain-box{
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 43px;
    width: 100%;
    height: 94%;
    overflow-y: scroll;
    background-color: $bodyCol;
    p{
        color: #555;
        text-align: center;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }
}
</style>